<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>particles.js</title>
  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles." />
  <meta name="author" content="Vincent Garreau" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" media="screen" href="css/style.css" />
  <style>
    .tips {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      color: #fff;
      font-size: 24px;
    }
  </style>
</head>

<body>
  <span class="tips">这里需要启动服务，可以使用vscode中live server 或者nginx 访问.</span>
  <!-- count particles -->
  <div class="count-particles"><span class="js-count-particles">--</span> particles</div>

  <!-- particles.js container -->
  <div id="particles-js"></div>

  <!-- scripts -->
  <script src="./js/lib/particles.js"></script>

  <!-- 主要运行particles，其中导入配置文件 -->
  <script>
    // 可自行从官网，手动配置好，点击导出配置，放在config文件夹，在手动引入即可.
    particlesJS.load('particles-js', './config/particlesjs-config.json', function () {
      console.log('particles.js loaded - callback')
    })
  </script>

  <!-- Stats 是一个性能监控工具 -->
  <!-- stats.js -->
  <script src="js/lib/stats.js"></script>
  <script>
    var count_particles, stats, update
    stats = new Stats()
    stats.setMode(0)
    stats.domElement.style.position = 'absolute'
    stats.domElement.style.left = '0px'
    stats.domElement.style.top = '0px'
    document.body.appendChild(stats.domElement)
    count_particles = document.querySelector('.js-count-particles')
    update = function () {
      stats.begin()
      stats.end()
      if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
        count_particles.innerText = window.pJSDom[0].pJS.particles.array.length
      }
      requestAnimationFrame(update)
    }
    requestAnimationFrame(update)
  </script>
</body>

</html>